#app {
	$base-sidebar-width: 250px; //侧边栏的宽度

	--yd-menu-text-color: #cacad1; //菜单项文字颜色
	--yd-menu-text-color-light: #fff; //当前项的菜单标题颜色
	--yd-menu-text-color-active: #2beded; //当前项菜单项的颜色
	--yd-menu-item-hover-bg: #202e51; //hover时菜单项的颜色

	.el-menu {
		border-right: none;
		--el-menu-bg-color: transparent !important; //背景色
		.el-menu-item,
		.menu__title,
		.el-sub-menu__title {
			color: var(--yd-menu-text-color);
		}
		.el-sub-menu.is-active .el-sub-menu__title {
			color: var(--yd-menu-text-color-light);
		}

		.el-menu-item.is-active {
			color: var(--yd-menu-text-color-active);
		}
		.el-menu-item:hover,
		.el-sub-menu__title:hover {
			background-color: var(--yd-menu-item-hover-bg);
		}
	}

	.main-container {
		min-height: 100%;
		transition: margin-left 0.28s;
		margin-left: $base-sidebar-width;
		position: relative;
	}

	.sidebarHide {
		margin-left: 0 !important;
	}

	// 侧边栏
	.sidebar-container {
		-webkit-transition: width 0.28s;
		transition: width 0.28s;
		width: $base-sidebar-width !important;
		background: linear-gradient(#345e8b, #111d46);
		position: fixed;
		font-size: 0px;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 1001;
		overflow: hidden;
		-webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
		box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);

		// reset element-ui css
		.horizontal-collapse-transition {
			transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
		}

		// .scrollbar-wrapper {
		// 	overflow-x: hidden !important;
		// }

		// .el-scrollbar__bar.is-vertical {
		// 	right: 0px;
		// }

		.el-scrollbar {
			height: 92%;
		}

		// &.has-logo {
		// 	.el-scrollbar {
		// 		height: calc(100% - 50px);
		// 	}
		// }

		// .is-horizontal {
		// 	display: none;
		// }

		// a {
		// 	display: inline-block;
		// 	width: 100%;
		// 	overflow: hidden;
		// }

		// .svg-icon {
		// 	margin-right: 16px;
		// }

		// .el-menu {
		// 	border: none;
		// 	height: 100%;
		// 	width: 100% !important;
		// }

		// 	.el-menu-item,
		// 	.menu-title {
		// 		overflow: hidden !important;
		// 		text-overflow: ellipsis !important;
		// 		white-space: nowrap !important;
		// 	}

		// 	.el-menu-item .el-menu-tooltip__trigger {
		// 		display: inline-block !important;
		// 	}

		// 	// menu hover
		// 	.sub-menu-title-noDropdown,
		// 	.el-sub-menu__title {
		// 		&:hover {
		// 			background-color: rgba(0, 0, 0, 0.06) !important;
		// 		}
		// 	}

		// 	& .theme-dark .is-active > .el-sub-menu__title {
		// 		color: $base-menu-color-active !important;
		// 	}

		// 	& .nest-menu .el-sub-menu > .el-sub-menu__title,
		// 	& .el-sub-menu .el-menu-item {
		// 		min-width: $base-sidebar-width !important;

		// 		&:hover {
		// 			background-color: rgba(0, 0, 0, 0.06) !important;
		// 		}
		// 	}

		// 	& .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
		// 	& .theme-dark .el-sub-menu .el-menu-item {
		// 		background-color: $base-sub-menu-background !important;

		// 		&:hover {
		// 			background-color: $base-sub-menu-hover !important;
		// 		}
		// 	}
	}

	.hideSidebar {
		.sidebar-container {
			width: 54px !important;
		}

		.main-container {
			margin-left: 54px;
		}

		.sub-menu-title-noDropdown {
			padding: 0 !important;
			position: relative;

			.el-tooltip {
				padding: 0 !important;

				.svg-icon {
					margin-left: 20px;
				}
			}
		}

		.el-sub-menu {
			overflow: hidden;

			& > .el-sub-menu__title {
				padding: 0 !important;

				.svg-icon {
					margin-left: 20px;
				}
			}
		}

		.el-menu--collapse {
			.el-sub-menu {
				& > .el-sub-menu__title {
					& > span {
						height: 0;
						width: 0;
						overflow: hidden;
						visibility: hidden;
						display: inline-block;
					}
					& > i {
						height: 0;
						width: 0;
						overflow: hidden;
						visibility: hidden;
						display: inline-block;
					}
				}
			}
		}
	}

	// mobile responsive
	.mobile {
		.main-container {
			margin-left: 0px;
		}

		.sidebar-container {
			transition: transform 0.28s;
			width: $base-sidebar-width !important;
		}

		&.hideSidebar {
			.sidebar-container {
				pointer-events: none;
				transition-duration: 0.3s;
				transform: translate3d(-$base-sidebar-width, 0, 0);
			}
		}
	}

	.withoutAnimation {
		.main-container,
		.sidebar-container {
			transition: none;
		}
	}
}

// when menu collapsed
.el-menu--vertical {
	& > .el-menu {
		.svg-icon {
			margin-right: 16px;
		}
	}
}
